export default {
  mounted() {
    if (!localStorage.getItem('music')) {
      localStorage.setItem('music', true);
    }
    // 吧字符串转换成对象
    this.$store.state.music = JSON.parse(localStorage.getItem('music'));


    // 触发按键动画
    var btn = document.querySelectorAll('i');

    for (var i = 0; i < btn.length; i++) {
      let currentBtn = i;
      btn[currentBtn].addEventListener('mousedown', (e) => {
        btn[currentBtn].className = 'active';

      });
      btn[currentBtn].addEventListener('mouseup', (e) => {
        btn[currentBtn].className = '';

        // 如果父亲的类名存在c1,则是点击了c1按钮
        // 暂停
        if (btn[currentBtn].parentNode.className.indexOf('c1') !== -1) {
          this.$store.commit('downStop');
        }
        // 音效
        if (btn[currentBtn].parentNode.className.indexOf('c2') !== -1) {
          this.$store.commit('musicChange');
        }

        // 重玩
        if (btn[currentBtn].parentNode.className.indexOf('c3') !== -1) {
          location.reload();
        }


      });

    }


    // 捕获按键执行功能，并触发动画
    document.addEventListener('keydown', (e) => {

      if (e.code == 'KeyS') {
        btn[1].className = 'active';

      }
      if (e.code == 'KeyP') {
        btn[0].className = 'active';
      }
      if (e.code == 'KeyQ') {
        this.$store.commit('isChangeCss');
      }
      if (e.code == 'KeyR') {
        btn[2].className = 'active';
        location.reload();
      }
      if (e.code == 'Space') {
        btn[3].className = 'active';
      }
      if (e.code == 'ArrowUp') {
        btn[4].className = 'active';

      }
      if (e.code == 'ArrowRight') {
        btn[5].className = 'active';

      }
      if (e.code == 'ArrowLeft') {
        btn[6].className = 'active';

      }
      if (e.code == 'ArrowDown') {
        btn[7].className = 'active';

      }

    });

    // 捕获按键执行功能，并触发动画
    document.addEventListener('keyup', (e) => {
      if (e.code == 'KeyS') {
        btn[1].className = '';
        this.$store.commit('musicChange');
      }
      if (e.code == 'KeyP') {
        btn[0].className = '';
        this.$store.commit('downStop');
      }

      if (e.code == 'KeyR') {
        btn[2].className = '';
      }
      if (e.code == 'Space') {
        btn[3].className = '';
      }
      if (e.code == 'ArrowUp') {
        btn[4].className = '';

      }
      if (e.code == 'ArrowRight') {
        btn[5].className = '';

      }
      if (e.code == 'ArrowLeft') {
        btn[6].className = '';

      }
      if (e.code == 'ArrowDown') {
        btn[7].className = '';

      }

    });

    // if(this.$store.state.changeCss == true)
  },

};